<template>
	<view class="recommedContainer">
		<!-- 搜索框 -->
		<view class="searchBox">
			<searchBox/>
		</view>
		
		<!--轮播图-->
		<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(banner, index) in bannerList" :key="index"><image :src="banner.headImg"></image></swiper-item>
		</swiper>
		<!-- 导航菜单 -->
		<view class="kingkongModule">
			<view class="kingkongItem" v-for="(navigation, index) in navigationList" :key="index" @click="tosubsidy(navigation.roomTitle)">
				<image :src="navigation.headImg"></image>
				<text>{{ navigation.roomTitle }}</text>
			</view>
		</view>
		<!-- 健康头条 -->
		<view class="health">
			<view class="healthleft"><image src="../../static/images/shouye.png" mode=""></image></view>
			<view class="healthright">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
					<div v-for="(health, index) in health" :key="index">
						<text class="articles">文章</text>
						<span class="descriptive">{{ health.roomTitle }}</span>
					</div>
				</scroll-view>
			</view>
		</view>
		<!-- 限时抢购 -->
		<h2>
			限时抢购
			<a>抢购更多></a>
		</h2>
		<scroll-view scroll-x="true" class="scrollview">
			<view class="scrollItem" v-for="(item, index) in Snapup" :key="index">
				<image :src="item.productImageUrl"></image>
				<text>{{ item.productName }}</text>
				<text class="t1">{{ item.promotionPrice }}</text>
			</view>
			<view class="scrollItem more">查看更多</view>
		</scroll-view>
		<!-- 频道分类 -->
		<view class="channel"><image :src="image" mode=""></image></view>
		<h2 class="channel-h2">频道分类</h2>
		<!-- 两格分类 -->
		<view class="classify">
			<view class="classify-item" :class="{ left: (index + 1) % 2 == 1 }" v-for="(item, index) in channel" :key="index">
				<view class="classify-item-top">
					<p>{{ item.productName }}</p>
					<text class="text1">{{ item.info }}</text>
				</view>
				<view class="classify-item-bottom"><image :src="item.productImageUrl" mode="" class="img2"></image></view>
			</view>
		</view>
		<!-- 四个分类 -->
		<scroll-view scroll-x="true" class="scrollview">
			<view class="scrollItem" v-for="(item, index) in list" :key="index"><image :src="item.headImg"></image></view>
		</scroll-view>
		<h2 class="channel-h2">频道分类</h2>
		<div class="listContainer">
			<div class="listItem listleft" :class="{ listleft: (index + 1) % 2 == 1 }" v-for="(item, index) in medicine" :key="index">
				<image :src="item.productImageUrl" mode="" class="img3" @click="toDetail(index)"></image>
				<p class="name">{{ item.productName }}</p>
				<view class="desc">{{ item.info }}</view>
				<text class="price">￥{{ item.promotionPrice / 100 }}</text>
			</div>
		</div>
	</view>
</template>

<script>
import request from '../../utils/request.js';
import searchBox from '../../components/searchBox/searchBox.vue'
export default {
	data() {
		return {
			scrollTop: 0, //文章
			bannerList: [], //轮播图
			navigationList: [], //导航数据
			health: [], //健康
			Snapup: [], //抢购
			image: '', //图片
			channel: [], //频道
			list: [],
			medicine: []
		};
	},
	components:{
		searchBox
	},
	onPullDownRefresh(){
		this.getBanner();
	},
	//钩子
	mounted() {
		this.getBanner();
	},
	methods: {
		//跳转详细
		toDetail(index) {
			uni.navigateTo({
				url: '../shopDetail/shopDetail?id=' + index
			});
		},
		async getBanner() {
			const result = await request('/homeMobile');
			uni.stopPullDownRefresh()
			if (result.code == 200) {
				
				(this.bannerList = result.homeMobile[0].rooms), //存储轮播图数据
					(this.navigationList = result.homeMobile[1].rooms), //存储导航数据
					(this.health = result.homeMobile[2].rooms), //健康头条
					(this.Snapup = result.homeMobile[3].rooms), //限时抢购
					(this.image = result.homeMobile[4].rooms[0].headImg),
					(this.channel = result.homeMobile[3].rooms),
					(this.list = result.homeMobile[13].rooms),
					(this.medicine = result.homeMobile[19].rooms);
			}
		},
		tosubsidy(text) {
			if (text == '健康补贴') {
				uni.navigateTo({
					url: '/pages/subsidy/subsidy'
				});
			}
		}
	}
};
</script>

<style lang="stylus">
.recommedContainer
	background-color #EEEEEE
	.searchBox
		width 100%
		position fixed
		z-index 10
	.banner
		width 100%
		height 350upx
		image
			width 100%
			height 100%
	.kingkongModule
		display flex
		flex-wrap wrap
		margin 20upx 0
		.kingkongItem
			width 25%
			display flex
			flex-direction column
			align-items center
			justify-content center
			padding-top 40upx
			image
				width 110upx
				height 110upx
				border-radius 50%
			text
				font-size 26upx
				line-height 30upx
				margin-top 18rpx
	.health
		width 100%
		height 180upx
		.healthleft
			width 25%
			height 180upx
			display inline-block
			position relative
			image
				width 80%
				height 80%
				position absolute
				top 18rpx
				left 20rpx
		.healthright
			width 75%
			height 180upx
			background-color #FFFFFF
			display inline-block
			.scroll-Y
				width 100%
				height 180upx
				div
					font-size 30upx
					padding 25upx 8upx
				.articles
					width 84upx
					height 25upx
					color #DD524D
					border 2upx solid #DD524D
					margin-right 8upx
					overflow hidden
					text-overflow ellipsis
					white-space nowrap
				.descriptive
					display inline-block
					line-height 26upx
					width 70%
					overflow hidden
					text-overflow ellipsis
					white-space nowrap
	h2
		padding 22upx
		color #DD524D
		font-weight 700
		font-size 40upx
		a
			float right
			font-size 35upx
			color #000000
			font-weight 400
			// margin-right 10upx
	.scrollview
		display flex
		width 100%
		white-space nowrap
		.scrollItem
			width 200upx
			display inline-block
			margin-left 20upx
			vertical-align top // 全部上对齐
			&.more
				background-color #eee
				line-height 200upx
				text-align center
				margin-right 20upx
			image
				width 200upx
				height 200upx
				background-color #eee
				border-radius 10rpx
			text
				width 100%
				font-size 30upx
				display -webkit-box
				overflow hidden
				text-align center
				white-space pre-wrap
				-webkit-box-orient vertical
				-webkit-line-clamp 2
			.t1
				color #DD524D
	.channel // 频道分类
		width 100%
		height 200upx
		background-color #000000
		margin 15upx 0upx
		image
			width 100%
			height 200upx
	.channel-h2
		color #AD74FE
		text-align center
	.classify
		width 80%
		height 300upx
		margin 20upx 10% 5upx 10%
		.classify-item
			background-color #000000
			float left
			width 48%
			height 300upx
			background-color #FFFFFF
			border-radius 8upx
			padding 15upx
			box-sizing border-box
			margin-bottom 5upx
			&.left
				margin-right 4%
			p
				font-size 40upx
				font-weight 700
			.text1
				font-size 30upx
				color #B4B4B4
			.img2
				width 219UPX
				height 167UPX
	.classify
		.four
			width 25%
			height 300upx
			box-sizing border-box
			border 4upx solid #EEEEEE
	.listContainer
		width 100%
		height 2000upx
		background-color #007A F
		display flex
		flex-wrap wrap
		.listItem
			display inline-block
			width 49%
			height 612upx
			background-color #FFFFFF
			.img3
				width 100%
				height 70%
			.name
				overflow hidden
				text-overflow ellipsis
				white-space nowrap
				padding 10upx 20upx
			.desc
				color #9A99A1
				font-size 30upx
				padding 10upx 20upx
				overflow hidden
				text-overflow ellipsis
				white-space nowrap
			.price
				color #DD524D
				padding 10upx 20upx
</style>
